<template>
    <view class="feedback-container">
        <GZGJHeader title="意见反馈" show-back="true"></GZGJHeader>
        <view class="feedback-body-container">
            <view class="feedback-text-container">
                <textarea v-model:value="content" maxlength="300"></textarea>
                <view class="words-container">
                    <span>{{ content.length }}/300</span>
                </view>
            </view>
            <button class="submit" @click="submit">提交</button>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import GZGJHeader from '@/components/GZGJHeader.vue';
const content = ref('');
function submit() {
    uni.navigateBack();
}
</script>
<style lang="scss" scoped>
@import '@/static/css/common.scss';
.feedback-container {
    @extend .column-container-layout;
    justify-content: flex-start;
    .feedback-body-container {
        @extend .column-container-layout;
        justify-content: flex-start;
        flex: 1;
        padding: 15px;
        .feedback-text-container {
            @extend .column-layout;
            padding: 15px;
            border-radius: 10px;
            background-color: white;
            height: 50%;
            textarea {
                width: 100%;
                flex: 1;
            }
            .words-container {
                @extend .row-layout;
                justify-content: flex-end;
                margin-top: 15px;
                span {
                    font-size: 10px;
                    color: #aaaaaa;
                }
            }
        }
        .submit {
            width: 100%;
            margin: 30px 0;
            border-radius: 30px;
            border: 1px solid #e25111;
            font-size: 16px;
            color: #333333;
        }
        .submit:active {
            width: 100%;
            margin: 30px 0;
            border-radius: 30px;
            background-color: #e25111;
            font-size: 16px;
            color: white;
        }
    }
}
</style>
